import React, { Component } from 'react'
// 引入路由组件
import { Switch, Route, Redirect } from "react-router-dom";
// 引入自己的组件
import Login from '../pages/Login.jsx'
import Layout from '../pages/Layout.jsx'
import List from '../pages/List.jsx'
export default class Router extends Component {
  routes = [
    {
      path: '/list',
      component: List,
      exact: true,
      // 是否需要登录
      isLogin: true,
      meta: { title: '商品列表' }
    },
    {
      path: '/login',
      component: Login,
      exact: true,
      isLogin: false,
      meta: { title: '登录' }
    },
    {
      path: '/',
      component: Layout,
      exact: false,
      isLogin: false,
      meta: { title: '首页' }
    }
  ]
  render() {
    return (
      <div>
        <Switch>
          {
            this.routes.map((item, index) => {
              return <Route key={index} path={item.path} exact={item.exact} 
              // render运行在渲染之前添加逻辑判断
                render={()=>{
                  // 修改title
                  document.title = item.meta.title || 'orange';
                  if(item.isLogin){
                    // 判断页面是否需要登录
                    const token = localStorage.getItem('token'); // 用户登录的凭证
                    // 现在判断用户是否登录
                    if(!token) {
                      // 返回一个Redirect，页面就会重定向，跳转到指定页面
                      return <Redirect to="/login"></Redirect>
                    }
                  }
                  const Component = item.component
                  // 返回一个组件，可以正常显示页面
                  return <Component></Component>
                }}
              ></Route>
            })
          }
        </Switch>
      </div>
    )
  }
}
